import Taro, { Component, showToast } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'
import Empty from '../../../static/public/icon_order.png';

import Add from '../../../static/address/icon_add.png';
import Edit from '../../../static/address/icon_edit.png';
import NavigationBar from '../../../components/navigationBar/index';

import './index.scss'
import { receiptBookList } from '../../../services/address';
import { updateAddress, updateOrderAddress } from '../../../services/order';


export default class ShopList extends Component {

  config = {
    navigationBarTitleText: '发票簿',
    onReachBottomDistance: 50,
  }

  state = {
    pageData: {
      page: 1,
      page_number: 10
    },
    isMore: false,
    list: [],
    isEdit: false,
    orderId: null,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  };

  componentDidMount() {
  }
  componentWillMount() {
    if (this.$router.params.isEdit) {
      this.setState({
        isEdit: true
      })
    }
    if (this.$router.params.orderId) {
      this.setState({
        orderId: this.$router.params.orderId
      })
    }
  }

  componentDidShow() {
    receiptBookList({ ...this.state.pageData }).then(res => {
      this.setState({
        list: res.list
      }, () => {
        if (this.state.list.length < res.total) {
          this.setState({
            isMore: true,
            pageData: {
              page: this.state.pageData.page + 1,
              page_number: 10
            }
          })
        } else {
          this.setState({
            isMore: false
          })
        }
      })
    })
  }

  onReachBottom() {
    console.log('onReachBottom');
    if (this.state.isMore) {
      receiptBookList({ ...this.state.pageData }).then(res => {
        let temp = this.state.list;
        temp = temp.concat(res.list);
        this.setState({
          list: temp
        }, () => {
          if (this.state.list.length < res.total) {
            this.setState({
              isMore: true,
              pageData: {
                page: this.state.pageData.page + 1,
                page_number: 10
              }
            })
          } else {
            this.setState({
              isMore: false
            })
          }
        })
      })
    }
  }

  chooseAddress(id) {
    if (this.state.isEdit) {
      updateAddress({
        addr_id: id
      }).then(res => {
        Taro.navigateBack();
      })
    } else {
      if (this.state.orderId) {
        // 订单过来的修改地址
        updateOrderAddress({
          order_id: this.state.orderId,
          addr_id: id,
        }).then(res => {
          showToast({
            title: '修改成功',
            icon: 'none'
          });
          setTimeout(() => {
            wx.navigateBack();
          }, 1500);
        })
      } else {
        Taro.navigateTo({
          url: `/subPackageWork/pages/edit-apply-invoice/index?id=${id}`
        });
      }
    }
  }

  editAddres = (id) => {
    if (id) {
      Taro.navigateTo({
        url: `/subPacKagebWork/pages/edit-apply-invoice/index?id=${id}`
      });
      return false;
    }
    Taro.navigateTo({
      url: '/subPacKagebWork/pages/edit-apply-invoice/index'
    });
  }

  render () {
    const { list, isEdit } = this.state;
    return (
      <View className='my-address' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="发票簿" />
        <View className="add-box">
          <View className="add-btn" onClick={() => this.editAddres(0)}>
            <Image src={Add} className="add-icon" />
            新建发票簿
          </View>
        </View>
        {
          list.map(res => (
            <View key={res.id} className="item" onClick={() => this.chooseAddress(res.id)}>
              <View className="title-line">
                <View className="name">{res.receiver}</View>
                <View className="phone">{res.mobile}</View>
                {
                  res.dft ? (
                    <View className="default">默认</View>
                  ) : null
                }
              </View>
              <View className="address-line">
                <View className="address">{res.province_name}{res.city_name}{res.region_name} {res.address}</View>
                {!isEdit && <Image src={Edit} className="edit-icon" />}
              </View>
            </View>
          ))
        }
        {
          !list.length ? (
            <View className="no-address">
              <Image src={Empty} className="address-icon" />
              <View className="tip">暂无发票簿</View>
            </View>
          ) : null
        }
      </View>
    )
  }
}

